﻿<template>
  <div class="playrules">
    <header_ title="" :pathName="this.$store.state" background="#00000000" color="#00000000" image_="1" size="4.8vw" />
    <div class="top_title">
      <img src="../../public/img/dressUpExchange/result.png" alt="" />
    </div>
    <div class="nth">
      <!-- <div><img src="../../public/img/dressUpExchange/toumingKUANG.png" alt=""></div> -->
      <div>
        <img src="../../public/img/dressUpExchange/toumingKUANG.png" alt="" />
      </div>
      <div></div>
      <div class="content">
        <span>1、购买一个罗盘可获赠一个星星，每个罗盘可转动一次。转动星愿罗盘获得的礼物自动进入个人背包，获得的礼物<span>仅限打赏使用。</span></span>
        <span>2、
          点击一次"罗盘"可进行1次抽奖，百分百获得礼物，碎片等奖励。奖励放入背包中，可随时赠送，兑换。</span>
        <!-- <span>3、
          选中合成礼物时，将展示背包可用于合成的合成材料，您可以选择并调整原料个数，也可使用<span>推荐方案</span>，当选择的合成材料总金额小于合成礼物价值时，无法成功合成。</span>
        <span>4、
          推荐方案将尽可能为您推荐损耗较少的方案，该方案可能不是最小损耗，您可以自行调整方案。</span>
        <span>5、 当选择的合成礼物价值超过背包原料总价值时，无法成功合成。</span>
        <span>6、
          选用的合成材料总价值达到合成礼物价值即可进行礼物合成，<span>多出部分不予退回</span>，需谨慎操作。</span>
        <span>7、
          成功合成后，将扣除相应的背包原料，并将合成礼物发放到背包，可在“合成记录”中查看合成记录。</span> -->
        <span>3、 通过星愿罗盘获得的碎片可兑换礼物，麦位框，进场秀等奖励。</span>
      </div>
    </div>
    <div class="top_title">
      <img src="../../public/img/dressUpExchange/shuoming.png" alt="" />
    </div>
    <div class="nth nth_">
      <div>
        <img src="../../public/img/dressUpExchange/toumingKUANG.png" alt="" />
      </div>
      <div></div>
      <div class="content">
        <span>1、星愿罗盘是提升用户房间语音聊天互动体验的功能，仅供娱乐交流使用。用户获得的奖励不得方向兑换成现金或有价值的商品。</span>
        <span>2、
          平台禁止将通过星愿罗盘获得的奖励进行线上或线下交易，平台严厉打击以盈利为目的的礼物交易行为，通过非正当渠道获取礼物的用户需自行承担不利后果。
        </span>
        <span>3、
          任何影响互动公平性的用户及利用平台进行违法违规活动的用户，官方有权取消其参与本活动的资格，并收回违规账号非法获得的奖励；情节严重者，平台有权追究相关法律责任。</span>
        <span>4、
          消费中清注意保管好账号、密码、短信验证码等登录操作凭证，谨防上当受骗。</span>
        <span v-if="isiOS">5、 本活动于苹果公司无关。</span>
        <span v-else>5、本活动最终解释权归举办方所有。</span>
      </div>
    </div>
    <div class="top_title">
      <img src="../../public/img/dressUpExchange/gailv.png" alt="" />
    </div>
    <div class="nth_three">
      <!-- <img src="../../public/img/dressUpExchange/toumingKUANG.png" alt="" /> -->
      <div class="probability">
        <div>奖励获取概率</div>
        <div class="Arrlist">
          <div v-for="item,index in list" :key="index">
            <span>{{item.name}}</span><span>{{item.probability}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import header_ from "../../components/header_";
  import {
    Toast
  } from "vant";
  export default {
    data() {
      return {
        isiOS: false,
        list: []
      };
    },
    created() {
      this.isiOS = window.isiOS;
      this.boxgiftlist()
    },
    components: {
      header_,
    },
    methods: {
      boxgiftlist() {
        let arys = {}; //参数
        let url = "/lottery/boxgiftlist";
        this.$.encryption2(arys, url).then((res) => {
          if (res.data.status == 0) {
            this.list = res.data.result;
          } else {
            Toast(res.data.text);
          }
        });
      },
    },
  };
</script>
<style scoped>
  .most>div:nth-of-type(1) {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .most>div:nth-of-type(1)>img {
    width: 100%;
    height: 100%;
  }

  .nth>div:nth-of-type(1) {
    width: 100%;
    height: 100%;
    position: absolute;
  }

  .nth>div:nth-of-type(1)>img {
    width: 100%;
    height: 100%;
  }

  .top_title {
    width: 100vw;
    display: flex;
    height: 10vw;
    margin: 10vw auto 5vw;
    justify-content: center;
    align-items: center;
  }

  .top_title>img {
    width: 38.6vw;
    height: 100%;
  }

  .Arrlist {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .Arrlist>div {
    width: 100%;
    height: 9.13vw;
    display: flex;
  }

  .Arrlist>div>span {
    width: 50%;
    height: 9.13vw;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #484959;

  }

  .Arrlist>div>span:nth-of-type(1) {
    border-left: 1px solid #484959;
    border-right: 1px solid #484959;
  }

  .Arrlist>div>span:nth-of-type(2) {
    border-right: 1px solid #484959;
  }

  .Arrlist> :last-child>span {
    border-bottom: 0px;
  }

  .Arrlist> :last-child>span:nth-of-type(1) {
    border-left: 0px;
  }

  .probability {
    width: 78vw;
    margin: 36px auto;
    /* height: 8.9vw; */
    text-align: center;
    line-height: 9vw;
    font-size: 3.4vw;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ced2e0;
    box-sizing: border-box;
    background: url("../../public/img/dressUpExchange/toumingKUANG.png") no-repeat;
    background-size: cover;
  }

  .probability>div:nth-of-type(1) {
    border-bottom: 1px solid #484959;
  }

  .playrules>.nth_three {
    width: 92vw;
    margin: 20px auto;
    overflow: hidden;
    background: url("../../public/img/dressUpExchange/toumingKUANG.png") no-repeat;
    background-size: cover;
    position: relative;
  }
.nth_three>img{
  position: absolute;
  width: 96%;
  left: 2%;
}
  .content {
    width: 82vw;
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }

  .content>span {
    font-size: 3.3vw;
    color: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .content>span>span {
    color: #f9e306;
  }

  .playrules {
    width: 100vw;
    background: #000;
    overflow: hidden;
    background: url("../../public/img/dressUpExchange/di.jpg");
    background-size: cover;
  }

  .nth {
    position: relative;
    width: 92vw;
    height: 80vw;
    /* background: rgba(255, 255, 255, 0.08); */
    margin: 5vw auto;
    /* border: 1px solid #484959; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* background: url('../../public/img/dressUpExchange/toumingKUANG.png');
  background-size: cover; */
  }

  /* .nth > div:nth-of-type(1) {
  position: absolute;
  width: 11vw;
  height: 10vw;
  right: -5vw;
  top: -5vw;
  z-index: 100;
  background-color: #000;
  transform: rotateZ(45deg);
  border-bottom: 1px solid #484959;
}
.nth > div:nth-of-type(2) {
  position: absolute;
  width: 11vw;
  height: 10vw;
  left: -5vw;
  bottom: -5vw;
  z-index: 100;
  background-color: #000;
  transform: rotateZ(45deg);
  border-top: 1px solid #484959;
} */
  /* .nth > div:nth-of-type(3) {
  width: 84vw;
  height: 63vw;
} */

  .nth_ {
    width: 92vw;
    height: 92vw;
    /* background: url('../../public/img/dressUpExchange/toumingKUANG.png');
  background-size: cover; */
  }

  .nth_>div:nth-of-type(3) {
    width: 84vw;
    height: 82vw;
  }

  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

    html,
    body {
      height: 812px;
    }
  }
</style>